<!DOCTYPE html>
<html>
<head>
  <title>Butterfly.js Test Case</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta http-equiv="Access-Control-Allow-Origin" content="*"/>

  <meta http-equiv="X-Frame-Options" content="ALLOW-FROM">
  <meta http-equiv="pragma" content="no-cache" />

  <link href="../butterfly/css/butterfly.css" rel="stylesheet"/>
  <script type="text/javascript" src="../butterfly/js/require.js" data-main="../butterfly/js/butterfly-amd"></script>
  <style>
  #main {
    position: absolute;
    width: 100%; height: 100%;
  }
  #main > div {
    position: absolute;
    width: 100%; height: 100%;
    visibility: hidden;
  }
  #main > div.active {
    visibility: visible;
  }
  #switch {
    position: absolute;
    bottom: 20px; left: 20px;
  }
  </style>
</head>
<body>

  <!-- key window -->
  <div id="main" data-window="main/index">
    
    <div id="hall" data-view="$tabbar">
      <ul>
        <li>hall1</li>
        <li>hall2</li>
        <li>hall3</li>
      </ul>
      <div data-role="tab-content"></div>
    </div>

    <div id="sales" data-view="$tabbar" 
    data-routes="dashboard: sales/dashboard.html,
                schedule: sales/schedule.html,
                memo: sales/memo,
                listview: components/listview.html">
      <ul>
        <li><a href="#sales/dashboard">dashboard</a></li>
        <li><a href="#sales/schedule">schedule</a></li>
        <li><a href="#sales/memo">memo</a></li>
      </ul>
      <div data-role="tab-content"></div>
    </div>
    
  </div>

</body>
</html>